﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TNAC</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="./assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
      .home_icon { 
	background-image:url(assets/images/home.png);
	float:left;
}
.home_icon:hover {
	background-image:url(assets/images/home_hover.png);
}
      </style>
    

    
    <link href="./assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="./kendo/examples/shared/styles/examples-offline.css" rel="stylesheet" />
    <link href="./kendo/source/styles/kendo.common.css" rel="stylesheet" />
    <link href="./kendo/source/styles/kendo.silver.css" rel="stylesheet" />
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">P004</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
   <div class="page-header">
   <img src="assets/images/logo4_opengovTN.png">
   <div class="offset5">
   <h1 style="float:left">TNAC Octobre 2011 Election Data </h1><small>from another angle</small>
   </div>
   
   </div>
   
   <div class="row">
   <div class="span4">
   <div id="breadcrump" style="display:none;">
   <a onclick="showMap('paths')" class="home_icon">
   <img src="assets/images/1px.png" alt="" width="17px" height="16px" /></a>
   </div>
       <div class="alert alert-error">
    <a class="close" data-dismiss="alert">×</a>
 
    To see "delegation" level data , double click the map zone relative to the "circonscription" u want.<br/>
    To go back to the main map click the [HOME] image in the top left of "circ.." map.
    </div>
  <div id="map"></div>
    
   </div>
    <div class="span8">
      
      <!--data zone  -->
      <h3>Overview</h3>
      <div class="alert alert-info" id="summaryZone">
       <a class="close" data-dismiss="alert">×</a>
      <strong>Heads up !</strong> Hover The map to see some numbers .
      </div>
      <h3>Details </h3>
      <div class="alert alert-info" id="dataZone">
       <a class="close" data-dismiss="alert">×</a>
      <strong>For more information</strong>, click or double click the desired area .
      </div>
       
      <div id="tabstrip">
                <ul>
                    <li class="k-state-active">Summary </li>
                    <li>listes </li>
                    <li>pie </li>
                 </ul>
                <div>
                    <div>
                    <br/>
                      <div class="row">
	                      <div class="span2"><span class="label label-info">Enregistrés</span></div>
	                      <div class="span4">
	                      
	                       	<div class="progress" id="registred"></div>
			    
	                      </div>
                      </div>
                    
                     <div class="row">
	                      <div class="span2"><span class="label">Extraits</span></div>
	                      <div class="span4">
	                      
	                       	<div class="progress progress-info progress-striped" id="extraits"></div>
			    
	                      </div>
                      </div>

                       <div class="row">
	                      <div class="span2"><span class="label label-success">Valides</span></div>
	                      <div class="span4">
	                      
	                       	<div class="progress progress-danger progress-striped active" id="valides"></div>
			    
	                      </div>
                      </div>

                 </div>
                </div>
                <div>
                    <div id="grid">
                    </div>
                </div>
                <div>
                    <div id="putputpie">
                    </div>
                </div>
              </div> 
            
      
   </div>

   </div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- bootstrap js -->
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/js/bootstrap-transition.js"></script>
    <script src="./assets/js/bootstrap-alert.js"></script>
    <script src="./assets/js/bootstrap-modal.js"></script>
    <script src="./assets/js/bootstrap-dropdown.js"></script>
    <script src="./assets/js/bootstrap-scrollspy.js"></script>
    <script src="./assets/js/bootstrap-tab.js"></script>
    <script src="./assets/js/bootstrap-tooltip.js"></script>
    <script src="./assets/js/bootstrap-popover.js"></script>
    <script src="./assets/js/bootstrap-button.js"></script>
    <script src="./assets/js/bootstrap-collapse.js"></script>
    <script src="./assets/js/bootstrap-carousel.js"></script>
    <script src="./assets/js/bootstrap-typeahead.js"></script>
     <!-- kendoUI js -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script src="./kendo/source/js/kendo.core.js"></script>
    <script src="./kendo/source/js/kendo.fx.js"></script>
    <script src="./kendo/source/js/kendo.draganddrop.js"></script>
    <script src="./kendo/source/js/kendo.resizable.js"></script>
    <script src="./kendo/source/js/kendo.data.js"></script>
    <script src="./kendo/source/js/kendo.chart.js"></script>
    <script src="./kendo/source/js/kendo.pager.js"></script>
    <script src="./kendo/source/js/kendo.sortable.js"></script>
    <script src="./kendo/source/js/kendo.draganddrop.js"></script>
    <script src="./kendo/source/js/kendo.groupable.js"></script>
    <script src="kendo/source/js/kendo.grid.js"></script>
    <script src="kendo/source/js/kendo.tabstrip.js"></script>
    <!-- raphael js& core  -->
    <script src="assets/js/raphael.js"></script>
    <script src="assets/js/paths.js"></script>
    <script src="assets/js/LoadData.js" type="text/javascript"></script>
    <script src="assets/js/init.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {

            showMap('paths');
            $("#tabstrip").kendoTabStrip({
                animation: {
                    open: {
                        effects: "fadeIn"
                    }
                }

            });
           $("#tabstrip").hide();

        });
    
    </script>
  </body>
</html>
